<template>
  <view class="guide-list">
    <view class="guide-list-item" v-for="guide in guideList" :key="guide.purity">
      <view class="header">
        <view class="header-title">种子纯度：</view>
        <u-button size="mini" type="success" shape="circle" plain>{{ guide.purity }}</u-button>
      </view>
      <view class="main">
        <view class="advice">{{ guide.advice }}</view>
        <u-button type="warning" size="mini" shape="circle" plain @click="lookAdvice(guide.detail)">查看建议</u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"

const guideList = ref([
  {
    purity: "90%以上",
    advice: "建议培育",
    detail:
      "该纯度的种子纯度很高，颗粒饱满均匀，发育程度比较高，成熟度整齐一致，用于育种不会导致后期杂草发生率高等问题，水稻的发育会很好，基本可以放心种植。",
  },
  {
    purity: "80%~90%",
    advice: "建议提纯",
    detail: "该纯度的种子纯度较高，但后期生长时杂草发生率会较高，影响水稻发育，还会引起病虫泛滥。建议进行提纯后种植。",
  },
  {
    purity: "80%以下",
    advice: "不建议使用",
    detail:
      "该纯度的种植纯度较低，种子质量较低，会增加播种成本，后期生长不仅杂草发生率高，还会产生断苗断条等现象，严重影响产量，建议重新整理种子，将种子纯度提高到合适纯度进行育种。",
  },
])

const lookAdvice = (detail) => {
  uni.showModal({ title: "育种建议", content: detail, showCancel: false, confirmText: "关闭" })
}
</script>

<style lang="scss" scoped>
.guide-list {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 40rpx;
  &-item {
    display: flex;
    flex-direction: column;
    height: 200rpx;
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 40rpx;
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      &-title {
        margin-right: 20rpx;
      }
    }
    .main {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .advice {
        color: #fff;
        font-size: 45rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
